<template>
  <div class="content">
    <div class="login-body">
      <div class="login-title">后台管理系统</div>
      <a-form-model
        ref="loginForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="用户名" labelAlign="left" prop="username">
          <a-input v-model="form.username" placeholder="请输入用户名" />
        </a-form-model-item>
        <a-form-model-item label="密码" labelAlign="left" prop="password">
          <a-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </a-form-model-item>
        <a-form-model-item label="验证码" labelAlign="left" prop="checkCode">
          <a-input v-model="form.checkCode" placeholder="请输入验证码" />
          <div class="login-checkcode" @click="changeCheckCode">
            <img :src="checkcodeUrl" />
          </div>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }">
          <a-button type="primary" @click="login">
            登录
          </a-button>
          <div class="forget">
            <a>忘记密码?</a>
          </div>
        </a-form-model-item>
      </a-form-model>
      <!-- <form class="login-form" >
        <div class="login-item">
          <label>用户名</label>
          <input name="useranme"
                 type="text"
                 placeholder="请输入用户名">
        </div>
        <div class="login-item">
          <label>密码</label>
          <input name="password"
                 type="password"
                 placeholder="请输入密码">
        </div>
        <div class="login-item">
          <label>验证码</label>
          <input name="password"
                 placeholder="请输入验证码">
        </div>
        <div class="login-checkcode"
             @click="changeCheckCode">
          <img :src="checkcodeUrl">
        </div>
        <div class="login-btn">
          <a @click="login">登录</a>
        </div>
      </form> -->
    </div>
  </div>
</template>
<script>
import { login, checkcode } from '@a/api'
export default {
  data() {
    return {
      checkcodeUrl: '',
      form: {
        username: '',
        password: '',
        checkCode: '',
        checkCodePrefix: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '请输入8到16位密码', trigger: 'blur' }
          // { pattern: "^(?![0-9]+$)(?![a-zA-Z]+$)(?![0-9a-zA-Z]+$)(?![0-9\\W]+$)(?![a-zA-Z\\W]+$)[0-9A-Za-z\\W]{6,18}$", message: '请输入8到16位密码,且必须包含字母、数字和特殊字符', trigger: 'blur' },
        ],
        checkCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    let that = this
    this.changeCheckCode()
    localStorage.removeItem('token')
    document.onkeyup = function(event) {
      //JS监听回车
      var e = event || window.event || arguments.callee.caller.arguments[0] //兼容IE
      if (e && e.keyCode == 13) {
        // enter 键
        that.login()
      }
    }
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          login(this.form).then(res => {
            if (res.code === 200) {
              localStorage.setItem('token', res.data)
              this.$router.replace({
                path: '/index'
              })
            } else {
              this.$message.error(res.msg)
              this.changeCheckCode()
            }
          })
        } else {
          return false
        }
      })
    },
    changeCheckCode() {
      checkcode().then(res => {
        console.log(res)
        if (res.code === 200) {
          this.checkcodeUrl = res.data.img
          this.form.checkCodePrefix = res.data.checkCodePrefix
        }
      })
    },
    validate() {}
  }
}
</script>
<style>
.content {
  background-image: url('../assets/banner.jpg');
  background-size: cover;
  width: 100vw;
  height: 100vh;
  background-color: #eeeeee;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.login-body {
  margin: 0 auto;
  width: 600px;
  height: 350px;
  background-color: #ffffff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.9;
}
.login-body .login-title {
  margin: 20px auto;
  font-size: 30px;
  font-weight: 600;
}
.login-checkcode {
  position: relative;
  top: -42px;
  left: 150px;
  float: right;
  height: 0px;
}
.forget {
  position: relative;

  float: right;
  height: 0px;
}
.ant-form-item-required::before {
  opacity: 0;
}

.login-body .login-form {
  line-height: 50px;
}
.login-body .login-form .login-item label {
  font-weight: 600;
  display: inline-block;
  width: 60px;
}
.login-body .login-form .login-item input {
  width: 200px;
  line-height: 25px;
  border: none;
  border-bottom: solid 1px #eeeeee;
  outline: none;
}
.login-body .login-form .login-checkcode {
  position: relative;
  top: -50px;
  left: 130px;
  float: right;
  height: 30px;
}

.login-body .login-form .login-btn {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}
.login-body .login-form .login-btn a {
  color: #ffffff;
  display: inline-block;
  font-weight: 600;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
  background-color: #1890ff;
}
.login-body .login-form .login-btn a:active {
  color: #eeeeee;
  background-color: #0982ec;
}
</style>
